<template>
  <div class="personaldizhi">
    <div class="dizhixq1" v-if="flag2">
      <p>我的地址簿</p>
      <hr />
      <div class="dizhilxr">
        <div>
          <p>收货人*</p>
          <input type="text" v-model="form.address_name" />
        </div>
        <div>
          <p>手机号码*</p>
          <input type="text" v-model="form.address_phone" />
        </div>
      </div>
      <div class="dizhissq">
        <el-form>
          <el-form-item
            label="地址"
            :label-width="formLabelWidth"
            type="expand"
          >
            <el-cascader
              clearable
              class="elCacader"
              v-model="selectValue"
              :props="defultProp"
              :options="address"
              @change="handleChange"
            ></el-cascader>
            <!-- {{selectValue}} -->
          </el-form-item>
        </el-form>
        <p>详细地址*</p>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入内容"
          v-model="form.address_details"
        >
        </el-input>
      </div>
      <button class="btn1" @click="hideName1">取消</button>
      <button class="btn2" @click="hideName">保存该地址</button>
    </div>

    <!-- 编辑收货地址 -->
    <div class="dizhixq" v-if="flag3">
      <p>我的地址簿</p>
      <hr />
      <div class="dizhilxrbj">
        <div>
          <p>收货人*</p>
          <input type="text" v-model="bjdz.address_name" />
        </div>
        <div>
          <p>手机号码*</p>
          <input type="text" v-model="bjdz.address_phone" />
        </div>
      </div>
      <div class="dizhissqbj">
        <el-form>
          <el-form-item
            label="地址 *"
            :label-width="formLabelWidth"
            type="expand"
          >
            <el-cascader
              clearable
              class="elCacader"
              v-model="selectValue"
              :props="defultProp"
              :options="address"
              @change="handleChange"
            ></el-cascader>
            <!-- {{selectValue}} -->
          </el-form-item>
        </el-form>
        <!-- 文本域 -->
        <p>详细地址*</p>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入内容"
          v-model="bjdz.address_details"
        >
        </el-input>
      </div>
      <button class="btn1" @click="hideName2">取消</button>
      <button class="btn2" @click="xgDizhi()">更新该地址</button>
    </div>

    <!-- 地址列表 -->
    <div class="dizhilb" v-if="flag1">
      <div class="dizhilbp">
        <p>我的地址簿</p>
        <p @click="hideName1" style="cursor: pointer">新增地址+</p>
        <hr />
      </div>

      <div class="dizhillb">
        <div
          class="llbone"
          v-for="(address, index) in datas"
          :key="address.address_id"
        >
          <div class="mrdz"></div>
          <div class="dzxm">
            <p>{{ address.address_name }}</p>
          </div>
          <div class="dzxq">
            <p>
              <span>{{ address.address_prov }}</span>
              <span>{{ address.address_city }}</span>
              <span>{{ address.address_area }}</span>
              <span>{{ address.address_details }}</span>
            </p>
            <p>
              电话：<span>{{ address.address_phone }}</span>
            </p>
          </div>
          <div class="dzxg">
            <button @click="hideName2(address.address_id)">编辑</button>|
            <button @click="delAddress(address.address_id, index)">删除</button>
          </div>
        </div>
        <!-- <div style="height:300px">
            <el-empty description="暂无收货地址"></el-empty>
          </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import json from "../assets/address.json";
export default {
  name: "PersonalDizhi",
  data() {
    return {
      flag1: true,
      flag2: false,
      flag3: false,
      datas: [],
      bjdz: {},
      provinces: {},
      form: {
        user_id: localStorage.getItem("user_id"),
        address_name: "",
        address_phone: "",
        address_details: "",
      },
      //地址
      selectValue: [],
      defultProp: {
        label: "name",
        value: "name",
        children: "sub",
      },
      address: [],
      formLabelWidth: "100",
      addressState: 1,
    };
  },
  watch: {
    addressState: function () {
      this.viewAddress();
    },
  },
  methods: {
    hideName1() {
      this.flag1 = !this.flag1;
      this.flag2 = !this.flag2;
    },
    //编辑地址
    hideName2(id) {
      this.flag1 = !this.flag1;
      this.flag3 = !this.flag3;
      this.$axios
        .get("/api/address/getUserSomeAddress", {
          params: {
            user_id: localStorage.getItem("user_id"),
            address_id: id,
          },
        })
        .then((res) => {
          this.bjdz = res.data.results[0];
        })
        .catch((err) => {
          console.log("bjdzerr", err);
        });
    },
    //修改地址
    xgDizhi() {
      let phone = /^1\d{10}$/;
      if (phone.test(this.bjdz.address_phone)) {
        this.flag1 = !this.flag1;
        this.flag3 = !this.flag3;
        this.$axios
          .post("/api/address/changeAddress", {
            user_id: localStorage.getItem("user_id"),
            address_id: this.bjdz.address_id,
            address_name: this.bjdz.address_name,
            address_phone: this.bjdz.address_phone,
            address_prov: this.selectValue[0],
            address_city: this.selectValue[1],
            address_area: this.selectValue[2],
            address_details: this.bjdz.address_details,
          })
          .then((res) => {
            this.addressState += 1;
          });
      } else {
        this.$alert("手机号格式错误", {
          confirmButtonText: "确定",
        });
      }
    },
    //删除地址
    delAddress(id, index) {
      this.$confirm("确定删除该地址吗?", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "暂不删除",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.$axios
            .post("/api/address/delAddress", {
              user_id: localStorage.getItem("user_id"),
              address_id: id,
            })
            .then((res) => {
              this.datas.splice(index, 1);
            })
            .catch((err) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //新建地址
    hideName() {
      let phone = /^1\d{10}$/;
      if (phone.test(this.form.address_phone)) {
        this.$axios
          .post("/api/address/addNewAddress", {
            user_id: localStorage.getItem("user_id"),
            address_name: this.form.address_name,
            address_phone: this.form.address_phone,
            address_prov: this.selectValue[0],
            address_city: this.selectValue[1],
            address_area: this.selectValue[2],
            address_details: this.form.address_details,
          })
          .then((res) => {
            this.addressState += 1;
          });
        this.flag1 = !this.flag1;
        this.flag2 = !this.flag2;
      } else {
        this.$alert("手机号格式错误", {
          confirmButtonText: "确定",
        });
      }
    },
    viewAddress() {
      this.$axios
        .get("/api/address/viewAddress", {
          params: { user_id: localStorage.getItem("user_id") },
        })
        .then((res) => {
          this.datas = res.data.results;
        })
        .then(() => {
          this.listEdit();
        });
    },
    //地址
    listEdit() {
      console.log(json);
      this.address = json;
    },
    handleChange() {},
  },
  created() {
    this.viewAddress();
  },
};
</script>

<style>
.el-checkbox {
  float: left;
  margin-top: 19px;
}
.personaldizhi p {
  margin-top: 20px;
  margin-bottom: 9px;
  font-size: 13px;
}
.dizhixq {
  width: 87%;
  margin-left: 20px;
  padding: 0 20px;
  border: 1px solid #000;
}
.dizhixq1 {
  width: 87%;
  margin-left: 20px;
  padding: 0 20px;
  border: 1px solid #000;
}
.dizhixq > p:nth-child(1) {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: 600;
}
.dizhixq1 > p:nth-child(1) {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: 600;
}
.dizhilxrbj div:nth-child(1),
.dizhilxrbj div:nth-child(2) {
  display: flex;
  margin: 15px 0;
}
.dizhilxrbj p,
.dizhissqbj p {
  font-size: 14px;
  color: #606266;
  font-weight: 600;
}
.dizhilxrbj input:nth-child(2),
.dizhilxrbj input:nth-child(3) {
  width: 278px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.dizhilxrbj div:nth-child(1) > input {
  margin-left: 40px;
}
.dizhilxrbj div:nth-child(2) > input {
  margin-left: 26px;
}
.dizhixq1 .el-input {
  position: relative;
  left: 48px;
  font-size: 14px;
  display: inline-block;
  width: 139%;
}
.dizhixq .el-input {
  position: relative;
  left: 42px;
  font-size: 14px;
  display: inline-block;
  width: 139%;
}
.dizhilxr div:nth-child(1),
.dizhilxr div:nth-child(2) {
  display: flex;
  margin: 15px 0;
}
.dizhilxr p,
.dizhissq p {
  font-size: 14px;
  color: #606266;
  font-weight: 600;
}
.dizhilxr input:nth-child(2),
.dizhilxr input:nth-child(3) {
  width: 278px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.dizhilxr div:nth-child(1) > input {
  margin-left: 42px;
}
.dizhilxr div:nth-child(2) > input {
  margin-left: 30px;
}

.personaldizhi .el-cascader .el-input .el-input__inner:focus,
.personaldizhi .el-cascader .el-input.is-focus .el-input__inner {
  border-color: #000;
}
/* 文本域 */
.personaldizhi .el-textarea__inner:focus {
  border-color: #000;
}
.personaldizhi .el-textarea__inner {
  margin-top: 15px;
}
/* 设为默认 */
.dizhimoren {
  margin-top: 20px;
}
.personaldizhi .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #000;
}
.personaldizhi .el-checkbox__inner {
  width: 20px;
  height: 20px;
}
.personaldizhi .el-checkbox__input.is-checked .el-checkbox__inner,
.personaldizhi .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #000;
  border-color: #000;
}
.personaldizhi .el-checkbox__inner::after {
  left: 7px;
  position: absolute;
  top: 3px;
}
/* 保存地址 */

.btn1 {
  width: 30%;
  height: 50px;
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  font-size: 18px;
}
.btn2 {
  width: 30%;
  height: 50px;
  background-color: #000;
  color: #fff;
  border: 1px solid #000;
  margin-bottom: 30px;
  font-size: 18px;
  margin-left: 4%;
}

.dizhilb {
  width: 87%;
  height: 500px;
  margin-left: 20px;
  padding: 0 20px;
  border: 1px solid #000;
  overflow: hidden;
}
.dizhilbp > p:nth-child(1) {
  width: 30%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: 600;
  float: left;
}
.dizhilbp hr {
  clear: both;
}
.dizhillb {
  border-top: 1px dotted #c8cbcc;
  clear: both;
}
.dizhillb p {
  margin-top: 0;
  padding-top: 20px;
}
.dizhilbp > p:nth-child(2) {
  font-weight: 600;
  font-size: 14px;
  margin-left: 20%;
  margin-top: 30px;
  float: left;
  width: 11%;
  margin-left: 59%;
  text-decoration: underline;
}
.dizhillb > div {
  overflow: hidden;
  height: 65px;
}
.llbone {
  background: #f9f9f9;
  border-bottom: 1px dotted #ccc;
}
.dizhillb > div > div {
  float: left;
}
.dizhillb > div > div:nth-child(1) {
  width: 10%;
}
.dizhillb > div > div:nth-child(2) {
  width: 18%;
  margin-left: 5%;
  margin-right: 2%;
}
.dizhillb > div > div:nth-child(3) {
  width: 40%;
}
.dizhillb > div > div:nth-child(3) p {
  margin: 0;
  padding: 0;
  margin-top: 10px;
  margin-bottom: 10px;
}
.dizhillb > div > div:nth-child(4) {
  width: 20%;
  margin-left: 5%;
  height: 65px;
  line-height: 65px;
}
.dizhillb > div > div:nth-child(4) > button {
  background: none;
  border: none;
  font-size: 13px;
  text-decoration: underline;
}

.dzxq p:nth-child(1) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 设为默认地址按钮 */
.personaldizhi .el-radio__input.is-checked + .el-radio__label {
  color: #000;
  font-size: 12px;
}
.personaldizhi .el-radio__input.is-checked .el-radio__inner {
  border-color: #000;
  background: none;
}
.personaldizhi .el-radio__inner {
  width: 12px;
  height: 12px;
}
</style>